<!--#
layout("/layouts/platform.html"){
#-->
<script src="${base!}/assets/platform/plugins/echarts/echarts.min.js"></script>
<style>
    .host-title {
        width: 180px;
        height: 50px;
        line-height: 50px;
        background: #D9DEE4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        font-weight: bold;
    }

    .host-list {
        top: 50px;
        left: 0px;
        bottom: 0px;
        overflow-y: hidden;
        overflow-x: hidden;
        min-height: 550px;
        height: 100%;
    }

    .host-list ul {
        padding-left: 0;
        min-height: 550px;
        height: 100%;
    }

    .host-list li {
        background-color: #D9DEE4;
        list-style: none;
        padding-bottom: 10px;
        height: 50px;
        line-height: 60px;
    }

    .host-list li:nth-child(1) {
        padding-left: 40px;
        padding-top: 10px;
    }

    .host-list li span:nth-child(1) {
        padding-left: 6px;
        position: absolute;
        line-height: 30px;
    }

    .host-list li span:nth-child(2) {
        padding-left: 6px;
        font-size: 11px;
    }

    .host-list li.active {
        background-color: #FFFFFF;
        cursor: default;
    }

    .host-list li:hover {
        background-color: #FFFFFF;
        cursor: pointer;
    }

    a:hover {
        color: #0e78c5;
        cursor: pointer;
    }
</style>
<div id="app" v-cloak style="height: 100%;">
    <el-row style="height: 100%;">
        <el-col :span="4" style="background-color: #D9DEE4;height: 100%;">
            <div class="host-list">
                <ul>
                    <li @click="loaddata" :class="hostName==''?'active':''">
                        <span>主机列表</span>
                    </li>
                    <li v-for="o in hostList" @click="loadhost(o.hostName)" :class="hostName==o.hostName?'active':''">
                        <span>{{o.hostName}}</span>
                        <span>{{o.hostAddress}}</span>
                    </li>
                </ul>
            </div>
        </el-col>
        <el-col :span="20">

            <el-row class="header navbar">
                <div class="btn-group tool-button mt5">
                    <span>主机: {{hostName==''?'全部主机':hostName}}</span>
                    <el-button v-if="hostName" style="margin-left:3px" type="text" icon="ti-stats-up"
                               @click="openCupMem" title="资源监控"></el-button>
                    <el-button style="margin-left:3px" type="text" icon="ti-timer"
                               @click="openTask" title="任务列表"></el-button>
                    <el-button style="margin-left:3px" type="text" icon="ti-reload"
                               @click="hostData" title="刷新数据"></el-button>

                </div>
                <div class="pull-right offscreen-right mt5" style="margin-right: 18%;">
                    <a class="el-button el-button--default el-button--medium" href="${base}/platform/sys/app/jar"
                       data-pjax>安装包</a>
                    <a class="el-button el-button--default el-button--medium"
                       href="${base}/platform/sys/app/conf">配置文件</a>

                </div>
            </el-row>
            <el-row class="el-table-container">
                <el-table
                        :data="appList"
                        size="small"
                        header-align="center"
                        style="width: 100%"
                >
                    <el-table-column
                            prop="name"
                            label="实例名称"
                            header-align="center"
                            align="left"
                            width="130"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="processId"
                            label="进程ID"
                            width="56"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="hostName"
                            label="主机信息"
                            width="130"
                            :show-overflow-tooltip="true"
                    >
                        <template slot-scope="scope">
                            <span style="font-size: 12px;">{{scope.row.hostName}}</span><br/>
                            <span style="font-size: 10px;">{{scope.row.hostAddress}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="hostName"
                            label="JVM"
                            width="180"
                            :show-overflow-tooltip="true"
                    >
                        <template slot-scope="scope">
                            <span>Total: {{scope.row.vmTotal}}MB</span>
                            <span>Use: {{scope.row.vmUse}}MB</span><br/>
                            <span>Free: {{scope.row.vmFree}}MB</span>
                            <span>Max: {{scope.row.vmMax}}MB</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="loglevel"
                            label="日志等级"
                    >
                        <template slot-scope="scope">
                            <span>{{scope.row.loglevel}}</span>
                            <el-button style="padding: 10px 3px" type="text" icon="el-icon-edit"
                                       title="更改日志等级"
                                       @click="openLoglevel({action:'processId',name:scope.row.name,processId:scope.row.processId,loglevel:scope.row.loglevel})"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="uptime"
                            label="运行时间">
                        <template slot-scope="scope">
                            {{formatUptime(scope.row.uptime)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="appVersion"
                            label="运行版本"
                            width="132"
                    >
                        <template slot-scope="scope">
                            <span>
                                安装包: {{scope.row.appVersion?scope.row.appVersion:'未获取'}}
                            </span><br/>
                            <span>
                                配置文件: {{scope.row.confVersion?scope.row.confVersion:'未获取'}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            header-align="center"
                            align="left"
                            width="75">
                        <template slot-scope="scope">
                            <el-button type="text" icon="ti-power-off"
                                       title="停止"
                                       :disabled="getOffDisabled(scope.row)" @click="openStop(scope.row)"></el-button>
                            <el-button type="text" icon="ti-desktop"
                                       title="启动新实例"
                                       :disabled="getStartDisabled(scope.row)"
                                       @click="openStart(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-row>
        </el-col>
    </el-row>

    <el-dialog :close-on-click-modal="false"
            :title="stopTitle"
            :visible.sync="stopDialogVisible"
            width="40%">
        <el-form :model="formData" ref="addForm" size="small" label-width="120px">
            <el-form-item prop="name" label="实例名" style="margin-bottom:0">
                {{formData.name}}
            </el-form-item>
            <el-form-item prop="processId" label="进程ID" style="margin-bottom:0">
                {{formData.processId}}
            </el-form-item>
            <el-form-item prop="name" label="安装包版本" style="margin-bottom:0">
                {{formData.appVersion}}
            </el-form-item>
            <el-form-item prop="name" label="配置文件版本" style="margin-bottom:0">
                {{formData.confVersion}}
            </el-form-item>
            <el-alert
                    title="执行命令需要时间，注意不要把一个实例下所有进程都停止了哦……"
                    type="warning" :closable="false">
            </el-alert>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="stopDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="doStop">创建任务</el-button>
        </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false"
            title="日志等级"
            :visible.sync="loglevelDialogVisible"
            width="40%">
        <el-form label-width="20px">
            <el-form-item>
                实例名: {{formData.name}} 进程ID:{{formData.processId||"所有进程"}}
            </el-form-item>
            <el-form-item>
                <el-radio-group v-model="formData.loglevel" size="medium">
                    <el-radio label="INFO">INFO</el-radio>
                    <el-radio label="WARN">WARN</el-radio>
                    <el-radio label="ERROR">ERROR</el-radio>
                    <el-radio label="DEBUG">DEBUG</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="loglevelDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doLoglevel">确 定</el-button>
                  </span>
    </el-dialog>

    <el-dialog :close-on-click-modal="false"
            :title="startTitle"
            :visible.sync="startDialogVisible"
            width="40%">
        <el-form :model="formData" ref="addForm" :rules="formRules" size="small" label-width="120px">

            <el-form-item prop="name" label="实例名" style="margin-bottom:0">
                {{formData.name}}
            </el-form-item>
            <el-form-item prop="appVersion" label="安装包版本" style="margin-bottom:0">
                <el-select v-trim v-model="formData.appVersion" clearable placeholder="请选择">
                    <el-option
                            v-for="item in appVerList"
                            :key="item.appVersion"
                            :label="item.appVersion"
                            :value="item.appVersion">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="confVersion" label="配置文件版本" style="margin-bottom:0">
                <el-select v-trim v-model="formData.confVersion" clearable placeholder="请选择">
                    <el-option
                            v-for="item in confVerList"
                            :key="item.confVersion"
                            :label="item.confVersion"
                            :value="item.confVersion">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="startDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="doStart">创建任务</el-button>
        </span>
    </el-dialog>

    <el-dialog :close-on-click-modal="false"
            title="任务列表"
            :visible.sync="taskDialogVisible"
            width="88%">
        <el-row style="margin-top: -72px;margin-bottom: -50px;">
            <el-button style="padding-left:88px;" type="text" icon="ti-reload"
                       @click="pageData" title="刷新数据"></el-button>
            <el-table
                    :data="tableData"
                    @sort-change='pageOrder'
                    size="small"
                    header-align="center"
                    style="width: 100%"
                    :default-sort="{prop: 'opAt', order: 'descending'}"
            >
                <el-table-column
                        sortable
                        prop="name"
                        label="实例名称"
                        header-align="center"
                        align="center"
                        width="150"
                >
                </el-table-column>
                <el-table-column
                        sortable
                        prop="hostName"
                        label="主机名"
                        header-align="center"
                        align="center"
                        width="150"
                >
                    <template slot-scope="scope">
                        {{scope.row.hostName}}<br/>
                        <span style="font-size: 10px;">{{scope.row.hostAddress}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="appVersion"
                        label="软件版本"
                        width="150"
                >
                    <template slot-scope="scope">
                        安装包:{{scope.row.appVersion}}<br/>
                        配置文件:{{scope.row.confVersion}}<br/>
                        <span v-if="scope.row.processId">进程ID:{{scope.row.processId}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="action"
                        label="命令"
                        width="60"
                >
                </el-table-column>
                <el-table-column
                        sortable
                        prop="status"
                        label="状态"
                        header-align="center"
                        align="center"
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.status==0">待执行</span>
                        <span v-if="scope.row.status==1">执行中</span>
                        <span v-if="scope.row.status==2">执行成功</span>
                        <span v-if="scope.row.status==3">执行失败</span>
                        <span v-if="scope.row.status==4">已撤销</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="pushAt"
                        label="执行时间"
                        header-align="center" align="center">
                    <template slot-scope="scope">
                        {{formatTaskAt(scope.row.pushAt)}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="pushResult"
                        label="执行结果"
                        header-align="center"
                        align="center"
                        width="100"
                        :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                        sortable
                        prop="opAt"
                        label="创建时间"
                        header-align="center" align="center">
                    <template slot-scope="scope">
                        {{formatTaskAt(scope.row.opAt)}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="opAt"
                        label="创建人"
                        header-align="center" align="center">
                    <template slot-scope="scope">
                        {{scope.row.user.loginname}}
                    </template>
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="80">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status==0" @click="cannelTask(scope.row.id)" size="small"
                                   type="text">撤销
                        </el-button>
                        <el-button v-if="scope.row.status!=0" size="small" type="text" disabled>撤销</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="pageSizeChange"
                    @current-change="pageNumberChange"
                    :current-page="pageForm.pageNumber"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="pageForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageForm.totalCount">
            </el-pagination>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="taskDialogVisible = false">关 闭</el-button>
        </span>
    </el-dialog>

    <el-dialog :close-on-click-modal="false"
            :title="hostName+'  '+hostHdd"
            :visible.sync="cpuMemDialogVisible"
            width="55%">
        <el-row style="margin-top: -32px;margin-bottom: -50px;">
            <el-button type="text" icon="ti-reload"
                       @click="getCpuMem" title="刷新数据"></el-button>
            <el-row>
                <el-col :span="12">
                    <div id="div_cpu" style="width:300px;height:200px"></div>
                </el-col>
                <el-col :span="12" style="padding-left: 5px;">
                    <div id="div_tcp" style="width:300px;height:200px"></div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="padding-left: 5px;">
                    <div id="div_mem" style="width:300px;height:200px"></div>
                </el-col>
                <el-col :span="12" style="padding-left: 10px;">
                    <div id="div_net" style="width:300px;height:200px"></div>
                </el-col>
            </el-row>

        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cpuMemDialogVisible = false">关 闭</el-button>
        </span>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                stopDialogVisible: false,
                startDialogVisible: false,
                taskDialogVisible: false,
                cpuMemDialogVisible: false,
                loglevelDialogVisible: false,
                loglevelDialogTitle: "",
                stopTitle: "",
                startTitle: "",
                hostName: "",
                hostHdd: "",
                hostList: [],
                appList: [],
                tableData: [],
                pageForm: {
                    pageNumber: 1,
                    pageSize: 10,
                    totalCount: 0,
                    pageOrderName: "opAt",
                    pageOrderBy: "descending",
                },
                formData: {
                    id: ""
                },
                formRules: {
                    confVersion: [
                        {required: true, message: '配置文件版本', trigger: ['blur', 'change']}
                    ],
                    appVersion: [
                        {required: true, message: '安装包版本', trigger: ['blur', 'change']}
                    ]
                },
                appVerList: [],
                confVerList: [],
                netOption: {},
                cpuOption: {},
                memOption: {}
            }
        },
        methods: {
            formatUptime: function (val) {
                var up = moment(val * 1000);
                var now = moment();
                var hours = now.diff(up, 'hours');
                var minutes = now.diff(up, 'minutes') % 60;
                var seconds = now.diff(up, 'seconds') % 60;
                return hours + "小时" + minutes + "分钟" + seconds + "秒";
            },
            pageOrder: function (column) {//按字段排序
                this.pageForm.pageOrderName = column.prop;
                this.pageForm.pageOrderBy = column.order;
                this.pageData();
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                $.post(base + "/platform/sys/app/task/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            hostData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/sys/app/data", {hostName: self.hostName}, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.hostList = data.data.hostList;
                        self.appList = data.data.appList;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            formatAt: function (val) {
                if (val && val > 0)
                    return moment(val * 1000).format("YYYY-MM-DD HH:mm");
                return "";
            },
            formatTaskAt: function (val) {
                if (val && val > 0)
                    return moment(val * 1000).format("MM-DD HH:mm");
                return "";
            },
            formatCpuAt: function (val) {
                if (val && val > 0)
                    return moment(val * 1000).format("HH:mm:ss");
                return "";
            },
            loaddata: function () {
                this.hostName = "";
                this.hostData();
            },
            loadhost: function (h) {
                this.hostName = h;
                this.hostData();
            },
            getStartDisabled: function (obj) {
                //判断是否可以启动主机,满足条件为获取版本号
                if (obj.appVersion && obj.confVersion) {
                    return false;
                }
                return true;
            },
            getOffDisabled: function (obj) {
                //判断是否可以关机,满足条件为能获取版本号,且运行实例数量大于1
                var self = this;
                var num = 0;
                var enabled = false;
                self.appList.forEach(function (app) {
                    if (app.name == obj.name && app.appVersion && app.confVersion) {
                        num++;
                        if (app.processId == obj.processId) {
                            enabled = true;
                        }
                    }
                });
                if (num > 1 && enabled) {
                    return false;
                }
                return true;
            },
            openStart: function (row) {
                var self = this;
                self.startTitle = "启动新实例";
                self.startDialogVisible = true;
                self.formData = {
                    name: row.name,
                    hostName: row.hostName,
                    hostAddress: row.hostAddress,
                    confVersion: "",
                    appVersion: "",
                    action: "start"
                };
                $.post(base + "/platform/sys/app/version", {name: self.formData.name}, function (data) {
                    if (data.code == 0) {
                        self.appVerList = data.data.appVerList;
                        self.confVerList = data.data.confVerList;
                    }
                }, "json");
            },
            openStop: function (row) {
                var self = this;
                self.stopTitle = "停止实例";
                self.stopDialogVisible = true;
                self.formData = {
                    name: row.name,
                    hostName: row.hostName,
                    hostAddress: row.hostAddress,
                    confVersion: row.confVersion,
                    appVersion: row.appVersion,
                    processId: row.processId,
                    action: "stop"
                };
            },
            doStart: function () {
                var self = this;
                self.$refs["addForm"].validate(function (valid) {
                    if (valid) {
                        $.post(base + "/platform/sys/app/task/addDo", self.formData, function (data) {
                            if (data.code == 0) {
                                self.$message({
                                    message: "任务创建成功，可在任务列表中查看进度……",
                                    type: 'success'
                                });
                                self.startDialogVisible = false;
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
            doStop: function () {
                var self = this;
                self.$refs["addForm"].validate(function (valid) {
                    if (valid) {
                        $.post(base + "/platform/sys/app/task/addDo", self.formData, function (data) {
                            if (data.code == 0) {
                                self.$message({
                                    message: "任务创建成功，可在任务列表中查看进度……",
                                    type: 'success'
                                });
                                self.stopDialogVisible = false;
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
            openTask: function () {
                this.pageData();
                this.taskDialogVisible = true;
            },
            cannelTask: function (id) {
                var self = this;
                $.post(base + "/platform/sys/app/task/cannel/" + id, {}, function (data) {
                    if (data.code == 0) {
                        self.$message({
                            message: data.msg,
                            type: 'success'
                        });
                        self.pageData();
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            getCpuMem: function () {
                var self = this;
                $.post(base + "/platform/sys/app/osData", {hostName: self.hostName}, function (data) {
                    if (data.code == 0) {
                        var list = data.data;
                        var net_sent = [];
                        var net_recv = [];
                        var net_tcp = [];
                        var time_list = [];
                        var cpu_percent = [];
                        var mem_used = [];
                        var mem_free = [];
                        var mem_percent = [];
                        var mem_total = 0;
                        var sent_temp = 0, recv_temp = 0;
                        var i = 0;
                        var disk = list[0];
                        self.hostHdd = "磁盘已用" + ((disk.hdd_used) / 1024 / 1024 / 1024).toFixed(2) + "GB/总共" + ((disk.hdd_total) / 1024 / 1024 / 1024).toFixed(2) + "GB";
                        list.forEach(function (o) {
                            net_sent.push(i === 0 ? 0.1 : ((o.net_sent - sent_temp) / 1024).toFixed(2));
                            net_recv.push(i === 0 ? 0.1 : ((o.net_recv - recv_temp) / 1024).toFixed(2));
                            net_tcp.push(o.net_tcp);
                            time_list.push(self.formatCpuAt(o.timestamp));
                            cpu_percent.push(o.cpu_percent);
                            mem_used.push(o.mem_used);
                            mem_free.push(o.mem_free);
                            mem_percent.push(o.mem_percent);
                            mem_total = o.mem_total;
                            sent_temp = o.net_sent;
                            recv_temp = o.net_recv;
                            i++;
                        });
                        var colors = ['#5793f3', '#d14a61', '#675bba', '#000000', '#EE0BD4', '#16E2BD'];
                        self.netOption = {
                            color: colors,
                            tooltip: {
                                trigger: 'none',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            legend: {
                                data: ['出网kbps', '入网kbps']
                            },
                            grid: {
                                top: 50,
                                bottom: 50,
                                left: 50
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    axisLine: {
                                        onZero: false,
                                        lineStyle: {
                                            color: colors[1]
                                        }
                                    },
                                    axisPointer: {
                                        label: {
                                            formatter: function (params) {
                                                return '入网  ' + params.value
                                                    + (params.seriesData.length ? ' - ' + params.seriesData[0].data + 'kbps' : '');
                                            }
                                        }
                                    },
                                    data: time_list
                                },
                                {
                                    type: 'category',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    axisLine: {
                                        onZero: false,
                                        lineStyle: {
                                            color: colors[0]
                                        }
                                    },
                                    axisPointer: {
                                        label: {
                                            formatter: function (params) {
                                                return '出网  ' + params.value
                                                    + (params.seriesData.length ? ' - ' + params.seriesData[0].data + 'kbps' : '');
                                            }
                                        }
                                    },
                                    data: time_list
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '出网kbps',
                                    type: 'line',
                                    xAxisIndex: 1,
                                    smooth: true,
                                    data: net_sent
                                },
                                {
                                    name: '入网kbps',
                                    type: 'line',
                                    smooth: true,
                                    data: net_recv
                                }
                            ]
                        };
                        var cpu_title = 'CPU占用情况';
                        self.cpuOption = {
                            color: colors[4],
                            tooltip: {
                                trigger: 'none',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            legend: {
                                data: [cpu_title]
                            },
                            grid: {
                                top: 30,
                                bottom: 50,
                                left: 50
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    axisLine: {
                                        onZero: false,
                                        lineStyle: {
                                            color: colors[3]
                                        }
                                    },
                                    axisPointer: {
                                        label: {
                                            formatter: function (params) {
                                                return 'CPU  ' + params.value
                                                    + (params.seriesData.length ? ' - ' + params.seriesData[0].data + '%' : '');
                                            }
                                        }
                                    },
                                    data: time_list
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: cpu_title,
                                    type: 'line',
                                    xAxisIndex: 0,
                                    smooth: true,
                                    data: cpu_percent
                                }
                            ]
                        };
                        var mem_title = '内存占用情况(总内存' + (mem_total / 1024 / 1024 / 1024).toFixed(2) + 'G)';
                        self.memOption = {
                            color: colors[5],
                            tooltip: {
                                trigger: 'none',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            legend: {
                                data: [mem_title]
                            },
                            grid: {
                                top: 30,
                                bottom: 50,
                                left: 50
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    axisLine: {
                                        onZero: false,
                                        lineStyle: {
                                            color: colors[3]
                                        }
                                    },
                                    axisPointer: {
                                        label: {
                                            formatter: function (params) {
                                                var dataIndex = params.seriesData[0].dataIndex;
                                                var temp = ' 已用:' + (mem_used[dataIndex] / 1024 / 1024 / 1024).toFixed(2) + 'G';
                                                temp += ' 空闲:' + (mem_free[dataIndex] / 1024 / 1024 / 1024).toFixed(2) + 'G';
                                                return '内存  ' + params.value
                                                    + (params.seriesData.length ? ' - ' + params.seriesData[0].data + '%' + temp : '');
                                            }
                                        }
                                    },
                                    data: time_list
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: mem_title,
                                    type: 'line',
                                    xAxisIndex: 0,
                                    smooth: true,
                                    data: mem_percent
                                }
                            ]
                        };
                        var tcp_title='TCP连接数';
                        self.tcpOption = {
                            color: colors[2],
                            tooltip: {
                                trigger: 'none',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            legend: {
                                data: [tcp_title]
                            },
                            grid: {
                                top: 30,
                                bottom: 50,
                                left: 50
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    axisLine: {
                                        onZero: false,
                                        lineStyle: {
                                            color: colors[3]
                                        }
                                    },
                                    axisPointer: {
                                        label: {
                                            formatter: function (params) {
                                                return '连接数  ' + params.value
                                                    + (params.seriesData.length ? ' - ' + params.seriesData[0].data + '个' : '');
                                            }
                                        }
                                    },
                                    data: time_list
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: tcp_title,
                                    type: 'line',
                                    xAxisIndex: 0,
                                    smooth: true,
                                    data: net_tcp
                                }
                            ]
                        };
                        var div_cpu = document.getElementById("div_cpu");
                        div_cpu.style.width = div_cpu.clientWidth + "px";
                        self.echartCt = echarts.init(div_cpu);
                        self.echartCt.setOption(self.cpuOption, true);
                        var div_mem = document.getElementById("div_mem");
                        div_mem.style.width = div_mem.clientWidth + "px";
                        self.echartCt = echarts.init(div_mem);
                        self.echartCt.setOption(self.memOption, true);
                        var div_net = document.getElementById("div_net");
                        div_net.style.width = div_net.clientWidth + "px";
                        self.echartCt = echarts.init(div_net);
                        self.echartCt.setOption(self.netOption, true);
                        var div_tcp = document.getElementById("div_tcp");
                        div_tcp.style.width = div_tcp.clientWidth + "px";
                        self.echartCt = echarts.init(div_tcp);
                        self.echartCt.setOption(self.tcpOption, true);
                    }
                }, "json");
            },
            openCupMem: function () {
                var self = this;
                self.cpuMemDialogVisible = true;
                self.getCpuMem();
            },
            openLoglevel: function (obj) {
                var self = this;
                self.formData = obj;
                if (obj.action == "name") {
                    self.loglevelDialogTitle = "实例名: " + obj.name;
                }
                if (obj.action == "processId") {
                    self.loglevelDialogTitle = "实例名: " + obj.name + " 进程ID: " + obj.processId;
                }
                self.loglevelDialogVisible = true;
            },
            doLoglevel: function () {
                var self = this;
                $.post(base + "/platform/sys/app/loglevel", self.formData, function (data) {
                    if (data.code == 0) {
                        self.$message({
                            message: data.msg,
                            type: 'success'
                        });
                        self.loglevelDialogVisible = false;
                        self.hostData();
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            }
        },
        created: function () {
            this.hostData();

        }
    });
</script>

<!--#
}
#-->
